/*
 * @Author: kanglang
 * @Date: 2020-07-17 16:24:18
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-08-05 16:05:11
 * @Description: item条目
 */
import React, { PureComponent } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Image,
  PixelRatio,
} from 'react-native';
import { iconUserCoffee, iconRightGray02 } from '@/images';
import {
  px2dp,
  splitLineColorLightGray,
  fontColorBlack,
  fontColorSecDeepGray,
} from '@/styles';

const noop = () => {};
export default class ListItem extends PureComponent {
  static defaultProps = {
    title: '标题',
    extra: '', // 额外注释
    extraStyle: null, // 额外注释样式
    icon: null, // 图标
    arrow: null, // 图标 箭头方向(右,上,下), 可选right,up,down,empty，如果是empty则存在对应的dom,但是不显示
    onClick: noop
  };

  render() {
    const { onClick, style, rightBoxStyle, title, titleStyle, extra, extraStyle, icon } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => onClick()}
        style={[styles.container, style]}
      >
        <View style={[styles.container]}>
          {!!icon && <Image
            source={icon}
            resizeMode='contain'
            style={styles.iconImg}
          />}
          <View style={[styles.right, rightBoxStyle]}>
            <Text style={[styles.title, titleStyle]}>{title}</Text>
            <View style={styles.extraWrap}>
              <Text style={[styles.extra, extraStyle]}>{extra}</Text>
              {this._renderArrowImg() && <Image
                source={this._renderArrowImg()}
                resizeMode='contain'
                style={styles.arrowImg}
              /> }
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  }

  // 后续添加相应箭头
  _renderArrowImg = () => {
    const { arrow } = this.props;
    switch (arrow) {
    case 'up':
      return iconRightGray02;
    case 'down':
      return iconRightGray02;
    case 'right':
      return iconRightGray02;
    case 'empty':
      return null;
    default:
      return iconRightGray02;
    }
  };
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: px2dp(110),
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 1 / PixelRatio.get()
  },
  iconImg: {
    width: px2dp(40),
    height: px2dp(40),
    marginRight: px2dp(32),
  },
  right: {
    flex: 1,
    height: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: splitLineColorLightGray,
    // marginBottom: 1 / PixelRatio.get()
  },
  extraWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  arrowImg: {
    width: px2dp(28),
    height: px2dp(28),
  },
  title: {
    fontSize: px2dp(32),
    color: fontColorBlack,
  },
  extra: {
    fontSize: px2dp(32),
    color: fontColorSecDeepGray,
  },
});
